<h3>Dropzone {{$index + 1}}</h3>
<ul dnd-list="containers"
    dnd-allowed-types="['containerType']"
    dnd-external-sources="true"
    dnd-dragover="dragoverCallback(event, index, external, type)"
    dnd-drop="dropCallback(event, index, item, external, type, 'containerType')">
    <li ng-repeat="items in containers"
        dnd-draggable="items"
        dnd-type="'containerType'"
        dnd-effect-allowed="copyMove"
        dnd-moved="containers.splice($index, 1)">
        <div class="container-element box box-blue">
            <h3>Container</h3>
            <ul dnd-list="items"
                dnd-allowed-types="['itemType']"
                dnd-horizontal-list="true"
                dnd-external-sources="true"
                dnd-dragover="dragoverCallback(event, index, external, type)"
                dnd-drop="dropCallback(event, index, item, external, type, 'itemType')"
                dnd-inserted="logEvent('Element was inserted at position ' + index, event)"
                class="itemlist">
                <li ng-repeat="item in items"
                    dnd-draggable="item"
                    dnd-type="'itemType'"
                    dnd-effect-allowed="copyMove"
                    dnd-dragstart="logEvent('Started to drag an item', event)"
                    dnd-moved="items.splice($index, 1); logEvent('Item moved', event)"
                    dnd-copied="logEvent('Item copied', event)"
                    dnd-canceled="logEvent('Drag operation canceled', event)"
                    dnd-dragend="logEvent('Drag operation ended', event)">
                    {{item.label}}
                </li>
            </ul>
            <div class="clearfix"></div>
        </div>
    </li>
</ul>
